<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="会商会审" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <div style="margin: 36px 0" class="c-table">
        <table>
          <tr>
            <td class="bg-td">
              项目名称
            </td>
            <td>{{ currentDetail.projectName }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              代办员
            </td>
            <td>{{ currentDetail.realName }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              发起时间
            </td>
            <td>{{ currentDetail.startTime }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              结束时间
            </td>
            <td>{{ currentDetail.endTime }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              会议状态
            </td>
            <td>
              <el-button type="text" :style="{color: currentDetail.statusColor }">{{ currentDetail.statusName }}</el-button>
            </td>
          </tr>
          <tr>
            <td class="bg-td" rowspan="5">
              会议纪要
            </td>
            <td style="height: 200px">
              {{ currentDetail.content }}
            </td>
          </tr>
        </table>
      </div>
      <div class="f-r a-c f-w" style="width: 500px">
        <FileView2 v-for="(file,index) in commonFileList" :key="index" :file="file" />
      </div>
      <div class="f-r a-c f-w" style="width: 1000px">
        <el-image
          v-for="(file,index) in imageFileList"
          :key="index"
          style="width: 300px;height: 200px;margin-right: 20px;margin-top: 20px"
          :src="file.fileUrl"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { http_audit } from '@/api'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      options: [
        { value: 0, name: '待开始', color: '#EC2727' },
        { value: 1, name: '进行中', color: '#ECB32C' },
        { value: 2, name: '已完成', color: '#27BE1C' }
      ],
      currentDetail: {},
      commonFileList: [],
      imageFileList: []
    }
  },
  methods: {
    open(item) {
      this.dialogValue = true
      http_audit.read({
        id: item.id
      }).then(res => {
        this.currentDetail = res.data
        this.currentDetail.statusName = this.options.find(item => item.value == this.currentDetail.status)?.name
        this.currentDetail.statusColor = this.options.find(item => item.value == this.currentDetail.status)?.color
        // res.data.file = '[{"fileName":"132","fileType":"jpeg","fileUrl":"http://zhmsbgapi.wenkangkeji.com/zhmsbg/2023/02/26/89d57a7b-ab75-4b69-bfb6-30df514f5910.jpeg"},{"fileName":"student","fileType":"sql","fileUrl":"http://zhmsbgapi.wenkangkeji.com/zhmsbg/2023/02/26/b72ca7e3-3bc8-4db8-aed1-5771e24309bd.sql"},{"fileName":"132","fileType":"jpeg","fileUrl":"http://zhmsbgapi.wenkangkeji.com/zhmsbg/2023/02/26/c88d262e-1e1f-46d5-b6e2-1652c009d493.jpeg"}]'
        if (res.data.file && typeof res.data.file === 'string' && res.data.file.includes('{')) {
          const fileList = JSON.parse(res.data.file)
          const commonFileList = fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) === -1)
          const imageFileList = fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) > -1)
          this.commonFileList = commonFileList
          this.imageFileList = imageFileList
        }
      })
    },
    onPageBack() {
      this.dialogValue = false
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
  .bg-td {
    width: 200px !important;
  }
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
.box {
  width: 100%;
  background: #F5FAFD;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E4E5E7;
  padding: 24px 18px;
  padding-bottom: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  .box-item {
    margin-bottom: 15px;
  }
}
</style>
